import React from 'react'
import { Form, Icon, Divider, Card } from 'antd'
import LinkA from '@/components/publics/LinkA.jsx'
import './index.less'
import { findOneById } from '@/api/product-api.js'
export default class Edit extends React.Component {
  state = {
    form: { imgs: [] },
    visible: false,
  }
  componentDidMount() {
    findOneById(this.props.match.params.id).then((v) => {
      if (v.status === 0) {
        this.setState({
          form: v.data,
        })
      }
    })
  }
  render() {
    const title = (
      <div>
        <LinkA onClickLink={() => this.props.history.go(-1)}>
          <Icon
            type="arrow-left"
            style={{ color: 'green', fontSize: '18px', marginRight: '10px' }}
          />
        </LinkA>
        <span>商品详情</span>
      </div>
    )
    return (
      <Card title={title} bordered={false}>
        <ul
          style={{ listStyle: 'none', padding: 0, margin: 0 }}
          className="product-detail-list"
        >
          <li>
            <span className="title">商品名称：</span>
            <span className="content">{this.state.form.name}</span>
          </li>
          <li>
            <span className="title">商品描述：</span>
            <span className="content">{this.state.form.desc}</span>
          </li>
          <li>
            <span className="title">商品价格：</span>
            <span className="content">{this.state.form.price}元</span>
          </li>
          <li>
            <span className="title">所属分类：</span>
            <span className="content">电脑-->笔记本</span>
          </li>
          <li>
            <span className="title">商品图片：</span>
            <span className="content">
              {this.state.form.imgs.map((t) => {
                return <img src={t} />
              })}
            </span>
          </li>
          <li>
            <span className="title">商品详情：</span>
            <span
              className="content"
              dangerouslySetInnerHTML={{
                __html: this.state.form.detail,
              }}
            ></span>
          </li>
        </ul>
      </Card>
    )
  }
}
